<template>
  <div>
    <!-- 整个后台管理页面的容器，内部为上下结构 -->
    <el-container>
      <!-- 上下结构的上半部分 -->
      <el-header class="layout-header">
        <h3>这是上半部分</h3>
      </el-header>
      <!-- 上下结构的下半部分 -->
      <el-container class="layout-body">
        <!-- 下半部分的左侧结构 -->
        <el-aside class="layout-aside">
          <h3>这是下半部分的左侧</h3>
        </el-aside>
        <!-- 下半部分的右侧结构 -->
        <el-main> </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>


<style scoped>
* {
  margin: 0;
}
.layout-header {
  background: #2c3e50;
  color: #fff;
}
.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
.layout-aside {
  background: dimgray;
  color: #fff;
}
</style>
